<template>
	<!--酒店入驻 -->
	<view class="wrap">
		<view class="mar-top-20 input-group bg-ff">
			<view class="flex">
				<view class="flex-1">资料填写</view>				
				<view v-if="addressData.auditStatus == 0" class="text-tr fc-f1a">待审核</view>
				<view v-if="addressData.auditStatus == 1" class="text-tr fc-52c">审核通过</view>
				<view v-if="addressData.auditStatus == 2" class="text-tr fc-df5">审核失败</view>
			</view>	
			<view class="input-row border-bottom-1px">
				<text class="title">手机号</text>				
				<view class="input-row-item">
					<input class="padding-10" maxlength="11" type="number"  placeholder="请输入您的联系方式" v-model="addressData.enterpriseApplyPhone" />
				</view>
			</view>
			<view class="input-row border-bottom-1px" v-if="addressData.auditStatus != 0 && addressData.auditStatus != 1 && addressData.auditStatus != 3">
				<text class="title">验证码</text>
				<view class="input-row-item flex">
					<input class="padding-10 flex-1" maxlength="6" type="number" placeholder="请输入验证码" v-model="addressData.verifyCode " />
					<button class="codebtn" :style="{'background':getCodeBtnColor}"  @click="getCode()">{{getCodeText}}</button>
				</view>
			</view>	
			<view class="input-row border-bottom-1px">
				<text class="title">公司名称</text>
				<view class="input-row-item" >
					<input class="padding-10" placeholder="请输入公司名称" v-model="addressData.enterpriseName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">行业</text>
				<view class="input-row-item flex"  @click="toIndustry()" v-if="addressData.auditStatus != 0 && addressData.auditStatus != 1 && addressData.auditStatus != 3">
					<input class="padding-10 fs-28" maxlength="11" type="number" placeholder="请选择行业" :value="addressData.industryList" style="width:404rpx;"/>
					<text class="yzb yzb-next"></text>
				</view>
				<view class="input-row-item flex" v-else>
					<input class="padding-10" maxlength="11" type="number" placeholder="请选择行业" disabled  :value="addressData.industryList" style="width:404rpx;"/>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">证件类型</text>
				<view class="picker">
					<picker @change="naturePickerChange" :value="addressData.enterpriseApplyIdType" :range="naturelist">
						<input class="padding-10" placeholder="请选择证件类型" :value="naturelist[addressData.enterpriseApplyIdType]" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">证件号码</text>
				<view class="input-row-item">
					<input class="padding-10" maxlength="18" type="number" placeholder="请输入证件号码" v-model="addressData.enterpriseBusinessLicenseNo" />
				</view>
			</view>		
			<view class="border-bottom-1px">
				<text class="title fc-33 pad-top-20 dis-block" style="width: 40%;"><text class="fc-df5">*</text>营业执照</text>
				<view class="head-img mar-top-15" @click="uploadImgs(1)">
					<view v-if="addressData.enterpriseBusinessLicensePicture==''" class="yyzz fs-60">+</view>
					<image v-else :src="getImgUrl(addressData.enterpriseBusinessLicensePicture)" mode="widthFix"></image>
				</view>
			</view>	
			<view class="border-bottom-1px" >
				<text class="title fc-33 pad-top-20 dis-block" style="width: 40%;"><text class="fc-df5">*</text>身份证</text>
				<view class="flex">
					<view class="head-img mar-top-15" @click="uploadImgs(2)">
						<view v-if="addressData.enterpriseApplyIdFrontPicture==''" class="yyzz fs-28">正面</view>
						<image v-else :src="getImgUrl(addressData.enterpriseApplyIdFrontPicture)" mode="widthFix"></image>
					</view>
					<view class="head-img mar-top-15 mar-left-25" @click="uploadImgs(3)">
						<view v-if="addressData.enterpriseApplyIdReversePicture==''" class="yyzz fs-28">反面</view>
						<image v-else :src="getImgUrl(addressData.enterpriseApplyIdReversePicture)" mode="widthFix"></image>
					</view>					
				</view>
			</view>
		</view>
		<view class="flex mar-top-30">
			<radio-group @change="radioGroup">
				<radio color="#84C0F4" :value="1" :checked="true" style="transform:scale(0.72);"></radio>
			</radio-group>
			<view class="agreement2">
				已同意并同意《***协议》
			</view>
		</view>
		<view class="btn-row row"><!--  -->
			<button v-if="addressData.enterpriseId !='' && addressData.auditStatus ==2" type="primary" @click="register(2)" class="btn-save width-90 fc-ff">重新提交</button>
			<view v-else-if="addressData.auditStatus == 0 || addressData.auditStatus == 1|| addressData.auditStatus == 3"></view>
			<button type="primary" v-else class="btn-save width-90" @tap="register(1)">提交审核</button>
		</view>
	
	</view>
</template>

<script>
	import uploadImage from '@/common/ossutil/uploadFile';
	export default {				
		data() {			
			return {	
				enterpriseApplyPhone:uni.getStorageSync('phone'),
				getCodeText: '获取验证码',
				getCodeBtnColor: "#84C0F4",
				getCodeisWaiting: false,
				addressData: {
					enterpriseApplyPhone:''|| uni.getStorageSync('phone'),//联系电话
					enterpriseName:'',//企业名称		
					enterpriseIndustry:'',//行业类型
					industryName:'',//行业
					industryList:[],
					enterpriseApplyIdType:'',//证件类型
					enterpriseBusinessLicenseNo:'',//证件号
					enterpriseBusinessLicensePicture:'',//营业执照
					enterpriseApplyIdFrontPicture:'',//正面照
					enterpriseApplyIdReversePicture:'',//背面
					radioValue: 1,//协议选择
					verifyCode:'',//验证码
					enterpriseApplyWxUserId:uni.getStorageSync('wxuser_id'),//微信用户id
				},
				naturelist:['身份证','港澳台同胞证','护照']
			}
		},
		onLoad() {
			this.getRrecruitList()
		},
		onShow() {
		},
		methods:{
			async getRrecruitList(){
				let param = {
					pageNum: 1,
					pageSize: 10,
					imgType:1,
					enterpriseApplyWxUserId:uni.getStorageSync('wxuser_id'),
				}
				let data = await this.$apis.getRrecruitList(param);
				if(data.code == 200){
					if(data.rows.length>0){
						this.addressData = data.rows[0]
						//处理行业
						var newarry = []
						for(var i=0;i<data.rows[0].industryList.length;i++){
							newarry.push(data.rows[0].industryList[i].industryName)
						}
						this.addressData.industryList = newarry.toString()						
						//审核状态存储
						uni.setStorageSync('auditStatus', this.addressData.auditStatus);//存储openid
						uni.setStorageSync('enterpriseId', this.addressData.enterpriseId);//企业id
						console.log(uni.getStorageSync('enterpriseId'))
					}
				}
			},
			//行业
			toIndustry() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.industry,
					query: {
						id: 1
					}
				});
			},
			//选择图片
			uploadImgs(type) {
				var that = this
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						that.tmpImageUrl = tempFilePaths[0];
						that.uploadFile(type);
					}
				});
			},
			//  营业执照-身份证上传图片
			uploadFile(type) {
				uni.showLoading({
					title: '图片上传中'
				});
				uploadImage(0, this.tmpImageUrl, 'person/hotelauth/', result => {
					console.log('图片上传结果：', result);
					if(type == 1){
						this.addressData.enterpriseBusinessLicensePicture = result
					}else if(type == 2){
						this.addressData.enterpriseApplyIdFrontPicture = result
					}else{
						this.addressData.enterpriseApplyIdReversePicture = result
					}
					uni.hideLoading();
				});
			},
			//证件类型			
			naturePickerChange(e,naturelist) {
				this.addressData.enterpriseApplyIdType = e.target.value
			},
			//协议同意
			radioGroup(e) {
				this.addressData.radioValue = e.detail.value;
				console.log(this.addressData.radioValue)
			},
			// 点击注册按钮
			async register(type) {	
				if(this.addressData.enterpriseName == ''){
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					});
				}else if(this.addressData.enterpriseIndustry == ''){
					uni.showToast({
						title: '请选择行业',
						icon: 'none'
					});
				}else if(this.addressData.enterpriseBusinessLicenseNo ==''){
					uni.showToast({
						title: '请输入证件号',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.enterpriseApplyIdFrontPicture ==''){
					uni.showToast({
						title: '请上传法人身份证正面',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.enterpriseApplyIdReversePicture ==''){
					uni.showToast({
						title: '请上传法人身份证反面',
						icon: 'none'
					});
					return false;
				}else if (this.addressData.enterpriseBusinessLicensePicture == '') {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					});
					return false;
				}else{
					if(type == 1){
						console.log(this.addressData)
						//新增
						let res= await this.$apis.addRecruit(this.addressData);
						if(res){
							uni.showToast({title: '提交成功'})
							setTimeout(function(){
								uni.navigateBack({
									delta: 1
								})
							},1200)
						}else{
							
						}
					}else{
						delete this.addressData.industryList;
						this.addressData.auditStatus = 0
						//修改
						let res= await this.$apis.eidtecruit(this.addressData);
						if(res){
							uni.showToast({title: '提交成功'})
							setTimeout(function(){
								uni.navigateBack({
									delta: 1
								})
							},1200)
						}else{

						}
					}
				}
			},
			//获取验证码
			getCode() {
				var that = this
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.addressData.enterpriseApplyPhone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}				
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#ccc" //追加样式，修改颜色
				//示例用定时器模拟请求效果				
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					var res = this.$apis.getVerifyCode(that.addressData.enterpriseApplyPhone);
					if(res){
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框				
						this.setTimer(); //调用定时器方法
					}					
				}, 1000)
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#84C0F4";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			//图片配置域名(oss不需要，直接是返回完整的访问地址)
			getImgUrl(icon){
			   return icon;
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: #f6f6f6;
		.input-group{
			border-radius: 8rpx;
			padding: 26rpx 28rpx;
			.t-line{
				border-bottom: 2rpx dashed #f6f6f6;
				padding: 0 0 26rpx;
				height: auto;
			}
			.border-bottom-1px {
				position: relative;		
				&::after {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 0;
					left: 20upx;
					height: 1upx;
					content: '';
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
					background-color: #e2e2e2;
				}
			}
			
			.input-row {
				display: flex;
				flex-direction: row;
				position: relative;
				background: #fff;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;			
				.yzb-next {
					color: $font-color-999;
					text-align: center;
					font-size: 48rpx;
					position: relative;
					top: 13rpx;
				}
				.title {
					width: 25%;
					padding: 20upx 0;
					padding-left:30upx;
					line-height: 50upx;
					color: #333;
				}
				.pickstyle{
					width: 460rpx;
					input{
						font-size: 28rpx;
						text-align: left;
						height: 60rpx;
					}
				}
				.picker {					
					margin-left: 10upx;
					position: relative;
					width: 100%;
					top: -10rpx;
					picker {
						font-size: 24rpx;
						width: 100%;
						position: absolute;
					}
				}
				.yzb-next {
					float: right;
					color: #999;
				}
				.input-row-item {
					width: 568rpx;
					.remarktextarea{
						height: 205rpx;
						width: 494rpx;
					}
					input {
						text-align: left;
						font-size: 28rpx;
					}
					.codebtn{
						min-width:136rpx;
						padding: 0 20rpx;
						line-height: 65rpx;
						color: #fff;
						font-size: 28rpx;
						text-align: center;
						height:65rpx;
						background: #84C0F4;
						border-radius: 40rpx;
					}
				}
				
			}
		}
		.head-img{
			width:222rpx;
			height:232rpx;
			border-radius:8rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
			border: 1px solid #F8F8F8;
			.yyzz{
				width: 222rpx;
				height: 232rpx;
				display: block;
				background: #F8F8F8;
				border-radius: 8rpx;
				text-align: center;
				line-height: 232rpx;
				margin: 20rpx 0;
				color: #9B9B9B;
			}
			image{
				width:222rpx;
				height:232rpx;
				display: block;
			}
		}
		.agreement2{
			position: relative;
			top: 4px;
		}
		.btn-row {			
			width: 100%;
			box-sizing: border-box;
			.btn-save {
				background-color: #84C0F4;
				height: 90upx;
				line-height: 90upx;
				font-size: $font-size-34;
			}
			.width-55 {
				width: 55%;
			}
		
			.width-90 {
				width: 90%;
				margin: 60rpx auto;
			}
		}
	}
	input {
	    font-size:28rpx!important;
	}
</style>
